import { Checkbox, Space } from 'antd'
import React from 'react'
import style from './Index.module.less'

function Main ({ options, value = [], onChange }) {
  const checkAll = options.length === value.length
  const indeterminate = options.length > value.length && value.length > 0
  const onCheckAllChange = (e) => {
    if (checkAll) {
      onChange([])
    } else {
      onChange(options.map(li => li.value))
    }
  }
  return (
    <div className={style.container}>
      <Space direction='vertical'>
        <Checkbox indeterminate={indeterminate} checked={checkAll} onChange={onCheckAllChange}>全选</Checkbox>
        <Checkbox.Group options={options} value={value} onChange={onChange} />
      </Space>
    </div>
  )
}

export default Main
